<!DOCTYPE html>
<html>
    <head>
        <!-- 在网站HTML的<head>中添加 -->
        <!--<link rel="icon" type="image/x-icon" href="{{ url_for('static',filename='favicon.ico')}}">-->
        <!-- 确保有这行代码 -->
        <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>数据安全处理系统</title>
        <style>
            /* 基础重置 */
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: 'Segoe UI', sans-serif;
            }
    
            /* 侧边栏样式 */
            .sidebar {
                position: fixed;
                left: 0;
                top: 0;
                width: 240px;
                height: 100vh;
                background: #2c3e50;
                padding: 20px;
                box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            }
    
            .sidebar-header {
                color: #ecf0f1;
                font-size: 24px;
                margin-bottom: 30px;
                padding-bottom: 15px;
                border-bottom: 1px solid #34495e;
            }
    
            .nav-menu {
                list-style: none;
            }
    
            .nav-item {
                margin: 12px 0;
            }
    
            .nav-link {
                color: #bdc3c7;
                text-decoration: none;
                padding: 12px;
                border-radius: 6px;
                display: flex;
                align-items: center;
                transition: all 0.3s;
            }
    
            .nav-link:hover {
                background: #34495e;
                color: #3498db;
            }
    
            .nav-link i {
                margin-right: 12px;
                font-size: 18px;
            }
    
            /* 新增：主内容区扩展 */
            .main-content {
                margin: -10px -10px 40px 120px;
                padding: 10px 1%; /* 左右留白改为百分比适应 */
                min-height: 86vh;
                background: #f5f6fa;
                display: flex; /* 新增：弹性布局居中 */
                flex-shrink: 0;
                justify-content: center;
            }

            /* 上传卡片扩展 */
            .upload-card {
                background: white;
                border-radius: 12px;
                padding: 40px;
                box-shadow: 0 8px 30px rgba(0,0,0,0.1); /* 阴影增强 */
                width: 100%; /* 占满可用空间 */
                max-width: 800px; /* 最大宽度增加 */
                transition: transform 0.3s; /* 悬浮动效 */
            }

            /* 新增：卡片悬浮效果 */
            .upload-card:hover {
                transform: translateY(-2px);
            }

            /* 表单区块优化 */
            .form-section {
                margin: 25px 0;
                padding: 20px;
                border: 1px solid #e8eef3; /* 颜色变浅 */
                border-radius: 8px; /* 圆角增加 */
                background: #f9fbfd; /* 浅色背景 */
            }

            /* 标题间距调整 */
            .upload-title {
                margin-bottom: 35px;
                padding-bottom: 15px;
                border-bottom: 2px solid #3498db; /* 标题下划线 */
            }

            /* 输入框样式升级 */
            select, input[type="file"] {
                padding: 12px;
                border: 1px solid #dde2e8;
                border-radius: 6px;
                background: white;
                transition: border-color 0.3s;
            }

            /* 输入框聚焦效果 */
            select:focus, input[type="file"]:focus {
                border-color: #3498db;
                outline: none;
            }

            /* 按钮样式升级 */
            .submit-btn {
                background: linear-gradient(135deg, #3498db, #2980b9); /* 渐变效果 */
                margin-top: 30px;
                font-size: 16px;
                box-shadow: 0 4px 6px rgba(52, 152, 219, 0.2);
            }

            /* 新增：步骤图标颜色 */
            .form-section h3 i {
                color: #3498db;
                margin-right: 10px;
            }

            /* 新增：文件选择区域视觉反馈 */
            input[type="file"]::file-selector-button {
                background: #e8f4ff;
                border: 1px solid #3498db;
                padding: 8px 16px;
                border-radius: 4px;
                margin-right: 15px;
                cursor: pointer;
            }

            /* 当前表格优化版 */
            .record-table {
                width: 100%;
                border-collapse: separate;
                border-spacing: 0 8px;
                max-width: 100%; /* 设置最大宽度 */
            }
            .record-table th,
            .record-table td {
                padding: 14px 28px;
                background: #fff;
                box-shadow: 0 2px 8px rgba(0,0,0,0.05);
                word-wrap: break-word; /* 允许单词内换行 */
                 max-width: 200px; /* 设置单元格最大宽度 */
            }

            .record-table th {
                padding-top: 16px;
                padding-bottom: 16px;
                background: #f8f9fa;
            }

            .submit-btn {
    background: linear-gradient(135deg, #3498db, #2980b9);
    margin-top: 30px;
    font-size: 16px;
    box-shadow: 0 4px 6px rgba(52, 152, 219, 0.2);
    /* 检查是否有其他影响点击的样式，例如：
    pointer-events: none; */
}





            /* 标题居中 */
            .record-container h2 {
                text-align: center;
                margin-bottom: 1.5rem;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px; /* 图标文字间距 */
            }
            /* 过滤区横向布局 */
            .filter-section {
                display: flex;
                justify-content: center;
                gap: 15px; /* 元素间距 */
                flex-wrap: wrap; /* 响应式换行 */
            }


        </style>
        <!-- 引入FontAwesome图标 -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    </head>
<body>
    <!-- 左侧功能侧边栏 -->
    <nav class="sidebar">
        <div class="sidebar-header">
            <i class="fas fa-shield-alt"></i>
            自动化脱敏系统
        </div>
        <ul class="nav-menu">
            <li class="nav-item">
                <a href="/index" class="nav-link">
                    <i class="fas fa-lock"></i>
                    首页
                </a>
            </li>
            <li class="nav-item">
                <a href="/decrypt" class="nav-link">
                    <i class="fas fa-unlock"></i>
                    数据解密
                </a>
            </li>
            <li class="nav-item">
                <a href="/records" class="nav-link">
                    <i class="fas fa-history"></i>
                    处理记录
                </a>
            </li>
        </ul>
    </nav>

    <!-- 内容区保持原样 -->
    <div class="main-content" >
        {% block content %}{% endblock %}
    </div>
</body>
</html>